<template>
  <div class="page">
    <image src="/static/img/bg.gif"
           mode="widthFix" />
    <div class="bolls">
      <section class="stage"
               @longpress="editCate(categoryList[index].Cid)"
               @click="enterContent(categoryList[index].Cid)"
               v-for="(item,index) in bolls"
               :key="index"
               :style="{'--top': item.top,'--left':item.left,'--width': item.width,'--height':item.height}">
        <figure class="ball bubble"
                :style="{'--color': item.color,'--font-size':item.fontSize,'--line-height':item.lineHeight}">{{categoryList[index].Name}}</figure>
      </section>
    </div>
    <operate ref="operate">
      <button class="bg-cyan"
              @click="editCate(0)">新宝盒</button>
    </operate>
  </div>

</template>

<script>
import operate from '@/component/operate.vue'
import { c_UpdateCate } from "@/utils/function.js"
export default {
  components: {
    operate
  },
  data () {
    return {
      categoryList: [],
      category: [],
      cid: -1,
      bolls: []
    }
  },
  methods: {
    getCollectCate: function () {
      this.categoryList = uni.getStorageSync('collectCate')
      this.categoryList = this.categoryList != null ? this.categoryList : []
      if (this.categoryList.length == 0) {
        c_UpdateCate()
        setTimeout(() => {
          this.categoryList = uni.getStorageSync('collectCate')
        }, 500);
      }
    },
    cssRender: function () {
      // 所有位置
      let position = []

      for (let i = 0; i < this.categoryList.length; i++) {
        let css = {}
        let top, left
        let loop = 0
        // 循环生成随机位置
        while (loop < 20) {
          let flag = 1
          top = Math.round(Math.random() * 450)
          left = Math.round(Math.random() * 250)
          for (let i = 0; i < position.length; i++) {
            let v = position[i]
            if (v.top - 100 < top && top < v.top + 100 && v.left - 100 < left && left < v.left + 100) {
              flag = 0
            }
          }
          if (flag) {
            position.push({ "top": top, "left": left })
            break
          }
          loop++
        }
        // 若小概率仍无位置则固定位置
        if (loop == 20) {
          position.push({ "top": i * 50, "left": i * 20 })
        }
        // 气泡位置
        css["top"] = position[i].top + "px"
        css["left"] = position[i].left + "px"
        css["width"] = "100px"
        css["height"] = "100px"

        // 气泡样式
        css["color"] = "red"
        css["fontSize"] = "20px"
        css["lineHeight"] = "100px"

        this.bolls.push(css)
      }
    },
    editCate: function (id) {
      if (id >= 0) {
        this.cid = id
        this.$refs.operate.closePopup()
        uni.navigateTo({
          url: './category?cid=' + this.cid
        });
      }
    },
    enterContent: function (id) {
      uni.navigateTo({
        url: './content?cid=' + id
      });
    }
  },
  onLoad () {
    this.categoryList = []
    this.bolls = []
    this.getCollectCate()
    setTimeout(() => {
      this.cssRender()
    }, 1000);
  },

}
</script>

<style lang="scss" scoped>
.page {
  padding: 0;
  image {
    width: 100%;
    z-index: -100;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.bolls {
  .ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
    background: radial-gradient(
      circle at bottom,
      #81e8f6,
      #76deef 10%,
      #055194 80%,
      #062745 100%
    );
  }
  .ball:before {
    content: "";
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 100%;
    background: radial-gradient(
      circle at top,
      white,
      rgba(255, 255, 255, 0) 58%
    );
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index: 2;
  }
  .ball:after {
    content: "";
    position: absolute;
    display: none;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 100%;
    -webkit-filter: blur(1px);
    filter: blur(1px);
    z-index: 2;
    -webkit-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
  }
  .ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.1) 40%,
      rgba(0, 0, 0, 0) 50%
    );
    -webkit-transform: rotateX(90deg) translateZ(-160px);
    transform: rotateX(90deg) translateZ(-160px);
    z-index: 1;
  }
  .ball.plain {
    background: black;
  }
  .ball.plain:before,
  .ball.plain:after {
    display: none;
  }
  .ball.bubble {
    text-align: center;
    line-height: var(--line-height);
    font-size: var(--font-size);
    color: var(--color);
    overflow: hidden;
    background: radial-gradient(
      circle at 50% 55%,
      rgba(240, 245, 255, 0.9),
      rgba(240, 245, 255, 0.9) 40%,
      rgba(225, 238, 255, 0.8) 60%,
      rgba(43, 130, 255, 0.4)
    );
    -webkit-animation: bubble-anim 2s ease-out infinite;
    animation: bubble-anim 2s ease-out infinite;
  }
  .ball.bubble:before {
    -webkit-filter: blur(0);
    filter: blur(0);
    height: 80%;
    width: 40%;
    background: radial-gradient(
      circle at 130% 130%,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 46%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.8) 58%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg)
      rotateX(10deg);
    transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
  }
  .ball.bubble:after {
    display: block;
    background: radial-gradient(
      circle at 50% 80%,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0) 74%,
      white 80%,
      white 84%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .stage {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: var(--width);
    height: var(--height);
    display: inline-block;
    margin: 20px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }
  body {
    width: 300px;
    margin: 20px auto;
    background: linear-gradient(
      to bottom,
      rgba(100, 100, 100, 0.2) 0%,
      rgba(255, 255, 255, 0.5) 40%,
      #ffffff 100%
    );
    background-repeat: no-repeat;
  }

  @-webkit-keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    20% {
      -webkit-transform: scaleY(0.95) scaleX(1.05);
      transform: scaleY(0.95) scaleX(1.05);
    }

    48% {
      -webkit-transform: scaleY(1.1) scaleX(0.9);
      transform: scaleY(1.1) scaleX(0.9);
    }

    68% {
      -webkit-transform: scaleY(0.98) scaleX(1.02);
      transform: scaleY(0.98) scaleX(1.02);
    }

    80% {
      -webkit-transform: scaleY(1.02) scaleX(0.98);
      transform: scaleY(1.02) scaleX(0.98);
    }

    97%,
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    20% {
      -webkit-transform: scaleY(0.95) scaleX(1.05);
      transform: scaleY(0.95) scaleX(1.05);
    }

    48% {
      -webkit-transform: scaleY(1.1) scaleX(0.9);
      transform: scaleY(1.1) scaleX(0.9);
    }

    68% {
      -webkit-transform: scaleY(0.98) scaleX(1.02);
      transform: scaleY(0.98) scaleX(1.02);
    }

    80% {
      -webkit-transform: scaleY(1.02) scaleX(0.98);
      transform: scaleY(1.02) scaleX(0.98);
    }

    97%,
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
}
</style>
